import {
  Button,
  DatePicker,
  Input,
  Modal,
  MonthPicker,
  RadioButton,
  RadioGroup,
  Select,
  SelectOption,
  Space,
  Switch
} from 'ant-design-vue'
import moment from 'moment'
import { Moment } from 'moment/moment'
import { defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'

import { companyApi, xhImformationApi } from '@/apis'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import {
  bus,
  copyText,
  download,
  downloadWithoutName,
  formatDate,
  isValueEmpty,
  optionsToMap
} from '@/utils'
import { debounce } from '@/utils/throttle'

export default defineComponent({
  name: 'BasicInformation',
  setup() {
    const monthRange = ref<Moment[]>([])
    const earningMonth = ref('')
    const filterList = [
      { label: '基本账号姓名', value: 1 },
      { label: '基本账号id', value: 3 },
      { label: '登录手机号', value: 2 }
    ]
    const earningType = [
      { label: '全部', value: '' },
      { label: '预估服务费', value: 3 },
      { label: '可提现服务费', value: 2 },
      { label: '已提现服务费', value: 1 }
    ]
    const searchText = ref('')
    const modalId = ref()
    const checkedAmount = ref(0)
    const sid = ref()
    const scompanyid = ref()
    const selectTag = ref(1)
    const selectCompanyId = ref()
    const salesCompanyId = ref()
    const modalstatus = ref()
    const showDialog = ref(false)
    const showDialogDataCenter = ref(false)
    const dialogLoading = ref(false)
    const tableRef = ref({} as ProTableRef)
    const nameList = ref([] as any[])
    const nameList2 = ref([] as any[])
    const tableConfig = ref({
      fixedHeight: true,
      options: {
        type: 'seq',
        border: true,
        align: 'center',
        toolbarConfig: {
          perfect: false,
          slots: {
            buttons: 'toolbarButtons'
          }
        },
        formConfig: {
          items: [
            {
              title: '',
              field: 'accountName',
              titleAlign: 'right',
              titleWidth: 100,
              slots: {
                default: 'basic'
              }
            },
            {
              title: '收益年月',
              titleAlign: 'right',
              titleWidth: 100,
              slots: {
                default: 'earningMonth'
              }
            },
            {
              title: '收益类型',
              field: 'incomeTag',
              titleAlign: 'right',
              titleWidth: 100,
              itemRender: {
                name: TABLE_ITEM_RENDER.ASelect,
                props: {
                  placeholder: '全部',
                  allowClear: true
                },
                options: earningType
              }
            },
            {
              slots: {
                default: () => {
                  return (
                    <Space>
                      <Button type="primary" htmlType="submit">
                        查询
                      </Button>
                      <Button
                        htmlType="reset"
                        onClick={() => {
                          selectTag.value = 1
                          searchText.value = ''
                          earningMonth.value = ''
                        }}
                      >
                        重置
                      </Button>
                    </Space>
                  )
                }
              }
            }
          ]
        },
        columnConfig: {
          minWidth: 150,
          resizable: true
        },
        columns: [
          {
            type: 'checkbox',
            width: 50
          },
          {
            title: '基本账号姓名',
            field: 'xhMemberName'
          },
          {
            title: '基本账号ID',
            field: 'xhMemberId'
          },
          {
            title: '登录手机号',
            field: 'memberMobile'
          },
          {
            title: '收益年月',
            field: 'month'
          },
          {
            title: '收益类型',
            field: 'profitType',
            formatter: ({ cellValue }) => {
              return earningType.find(k => k.value === cellValue)?.label || ''
            }
          },
          {
            title: '收益金额',
            field: 'profitAmt',
            formatter: ({ cellValue }) => {
              return `￥${cellValue}`
            }
          }
        ],
        onCheckboxChange: params => {
          checkedAmount.value =
            params?.records
              ?.map(k => Number(k.profitAmt) || 0)
              ?.reduce((a, b) => a + b, 0) || 0
          // console.log(params, '====checkchange')
        },
        onCheckboxAll: params => {
          checkedAmount.value =
            params?.records
              ?.map(k => Number(k.profitAmt) || 0)
              ?.reduce((a, b) => a + b, 0) || 0
        },
        // checkboxConfig: {
        //   showHeader: false,
        //   visibleMethod: ({ row }) => {
        //     return selectStatus(row)
        //   },
        //   range: true
        // },
        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              const data = await xhImformationApi.getDataCenterList({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                ...form,
                time: earningMonth.value
                  ? formatDate(earningMonth.value, 'yyyy-MM')
                  : '',
                selectTag: selectTag.value,
                selectContext: searchText.value
              })
              checkedAmount.value = 0
              return data
            }
          }
        }
      }
    } as ProTableProps)
    const handleExport = () => {
      xhImformationApi.exportDataCenterList().then(res => {
        download(res, '数据中心')
      })
    }

    onMounted(() => {
      bus.on('refreshFormationList', () => {
        nextTick(() => {
          tableRef.value.refresh()
        })
      })
    })
    return {
      scompanyid,
      tableRef,
      sid,
      modalId,
      dialogLoading,
      tableConfig,
      modalstatus,
      selectTag,
      filterList,
      searchText,
      selectCompanyId,
      salesCompanyId,
      showDialog,
      showDialogDataCenter,
      nameList2,
      nameList,
      earningMonth,
      checkedAmount,
      handleExport
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            basic: ({ row }) => (
              <div>
                <Select
                  allowClear
                  v-model:value={this.selectTag}
                  placeholder="请输入"
                  style="width: 200px"
                >
                  {this.filterList.map(v => (
                    <SelectOption value={v.value}>{v.label}</SelectOption>
                  ))}
                </Select>
                <Input
                  maxlength={60}
                  v-model:value={this.searchText}
                  placeholder="请输入"
                  style={{ width: '200px', marginLeft: '10px' }}
                />
              </div>
            ),
            earningMonth: () => {
              return (
                <Space>
                  <MonthPicker
                    v-model:value={this.earningMonth}
                    format="YYYY-MM"
                    placeholder="开始日期"
                  />
                </Space>
              )
            },
            toolbarButtons: () => {
              return (
                <Space>
                  <Button type="primary" onClick={this.handleExport}>
                    导出全部
                  </Button>
                  <div>当前选中的总收益：￥ {this.checkedAmount}元</div>
                </Space>
              )
            }
          }}
          {...this.tableConfig}
        />
      </div>
    )
  }
})
